<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="{{site.description}}" />
    <meta name="keywords" content="{{site.keywords}}" />
    <meta property="og:title" content="{{site.title}}" />
    <meta property="og:description" content="{{site.description}}" />
    <title>{{site.title}}-{{site.name}}</title>
    {{include './common/meta.html'}}
  </head>

  <body>
    <!-- 头部 -->
    {{include './common/header.html'}}

    <!-- 轮播图 -->
    <section class="row justify-center gap-10 mb-20">
      <div class="container">{{@ frag['product-banner']}}</div>
    </section>

    <!-- 内容 -->
    <section class="pb-20 justify-center row">
      <div class="w-1200 pb-20">
        <article>
          <div class="bg-fff pb-25 radius-6 list row">
            <div class="tab-header product-menu">
              <ul class="pt-10 pb-10">
                {{each cate.children}}
                <li data-category="{{$value.pinyin}}">
                  <a href="{{cate.path}}/index.html#{{$value.pinyin}}"
                    >{{$value.name}}</a
                  >
                </li>
                {{/each}}
              </ul>
            </div>
            <div class="tab-content product-container">
              <div class="product-list" data-category="network">
                {{each all.network}}
                <div class="product-item">
                  <a href="{{$value.path}}/article-{{$value.id}}.html#network">
                    <figure class="product-item-img">
                      <img src="{{$value.img}}" alt="{{$value.title}}" />
                    </figure>
                    <h3>{{$value.title}}</h3>
                  </a>
                </div>
                {{/each}}
              </div>

              <div class="product-list none" data-category="gateway">
                {{each all.gateway}}
                <div class="product-item">
                    <a href="{{$value.path}}/article-{{$value.id}}.html#gateway">
                  <figure class="product-item-img">
                    <img src="{{$value.img}}" alt="{{$value.title}}" />
                  </figure>
                  <h3>{{$value.title}}</h3>
                  </a>
                </div>
                {{/each}}
              </div>

              <div
                class="product-list bluetooth none"
                data-category="bluetooth"
              >
                {{each all.bluetooth}}
                <div class="product-item">
                     <a href="{{$value.path}}/article-{{$value.id}}.html#bluetooth">
                  <figure class="product-item-img">
                    <img src="{{$value.img}}" alt="{{$value.title}}" />
                  </figure>
                  <h3>{{$value.title}}</h3>
                  </a>
                </div>
                {{/each}}
              </div>

              <div class="product-list none" data-category="label">
                {{each all.label}}
                <div class="product-item">
                     <a href="{{$value.path}}/article-{{$value.id}}.html#label">
                  <figure class="product-item-img">
                    <img src="{{$value.img}}" alt="{{$value.title}}" />
                  </figure>
                  <h3>{{$value.title}}</h3>
                  </a>
                </div>
                {{/each}}
              </div>

              <div class="product-list none" data-category="monitor">
                {{each all.monitor}}
                 <a href="{{$value.path}}/article-{{$value.id}}.html#monitor">
                <div class="product-item">
                  <figure class="product-item-img">
                    <img src="{{$value.img}}" alt="{{$value.title}}" />
                  </figure>
                  <h3>{{$value.title}}</h3>
                </div>
                </a>
                {{/each}}
              </div>
              <div class="product-list none" data-category="environment">
                {{each all.environment}}
                <div class="product-item">
                    <a href="{{$value.path}}/article-{{$value.id}}.html#environment">
                  <figure class="product-item-img">
                    <img src="{{$value.img}}" alt="{{$value.title}}" />
                  </figure>
                  <h3>{{$value.title}}</h3>
                  </a>
                </div>
                {{/each}}
              </div>

              <div
                class="product-list environment none"
                data-category="management"
              >
                {{each all.management}}
                <div class="product-item">
                     <a href="{{$value.path}}/article-{{$value.id}}.html#management"> 
                  <figure class="product-item-img">
                    <img src="{{$value.img}}" alt="{{$value.title}}" />
                  </figure>
                  <h3>{{$value.title}}</h3>
                  </a>
                </div>
                {{/each}}
              </div>
            </div>
          </div>
        </article>
      </div>
    </section>

    <!-- footer -->
    {{include './common/footer.html'}}

    <!-- 返回顶部 -->
    {{include './common/backtop.html'}} {{include './common/js.html'}}

    <script>
      function initTabSwitcher(tabHeaderSelector, tabContentSelector) {
        const menu = document.querySelector(tabHeaderSelector);
        const tabContents = document.querySelectorAll(
          tabContentSelector + " > .product-list"
        );
        const menuItems = menu ? menu.querySelectorAll("li") : [];

        function showTab(category) {
          // 隐藏所有内容
          tabContents.forEach((tab) => {
            tab.classList.add("none");
          });

          // 移除 active 类
          menuItems.forEach((item) => {
            item.classList.remove("active");
          });

          // 显示目标内容
          const targetTab = document.querySelector(
            `${tabContentSelector} > .product-list[data-category="${category}"]`
          );
          if (targetTab) {
            targetTab.classList.remove("none");
          }

          // 设置当前菜单项为 active
          const activeMenuItem = menu.querySelector(
            `li[data-category="${category}"]`
          );
          if (activeMenuItem) {
            activeMenuItem.classList.add("active");
          }
        }

        function handleHashChange() {
          let hash = window.location.hash.replace("#", "");
          if (!hash) {
            const firstMenuItem = menu.querySelector("li[data-category]");
            if (firstMenuItem) {
              hash = firstMenuItem.getAttribute("data-category");
              window.location.hash = "#" + hash;
            }
          }

          if (hash) {
            showTab(hash);
          }
        }

        menuItems.forEach((item) => {
          item.addEventListener("click", function (e) {
            e.preventDefault();
            const category = this.getAttribute("data-category");
            if (category) {
              window.location.hash = "#" + category;
            }
          });
        });

        window.addEventListener("hashchange", handleHashChange);

        handleHashChange(); // 初始加载
      }

      // 调用初始化函数
      initTabSwitcher(
        ".tab-header.product-menu",
        ".tab-content.product-container"
      );
    </script>
  </body>
</html>
